<template>
  <div class="line_display">
    <!-- 地理地图-->
    <!-- 地图配置 -->
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">地图配置</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">鼠标缩放</span>
          <a-tooltip>
            <template slot="title">
              是否开启鼠标缩放和平移漫游
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="开" un-checked-children="关" v-model="form.display.roam" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">标签显示</span>
          <a-tooltip>
            <template slot="title">
              是否显示标签
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.label.show" />
        </a-col>
      </a-row>
    </div>

    <!-- 图例 -->
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">视觉映射</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">映射</span>
          <a-tooltip>
            <template slot="title">
              将数据映射到视觉元素（视觉通道）。
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-input placeholder="请输入最小值" style="display:inline-block; width: 45%;" v-model.number="form.display.visualMap.min"></a-input>
          <a-input placeholder="请输入最大值" style="display:inline-block; width: 45%; margin-left: 5%;" v-model.number="form.display.visualMap.max"></a-input>
        </a-col>
      </a-row>
    </div>
    <!-- 工具栏 -->
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">工具栏</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">显示</span>
          <a-tooltip>
            <template slot="title">
              是否显示工具栏组件
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.toolbox.show" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px;">
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">工具箱</span>
          <a-tooltip>
            <template slot="title">
              各工具配置项
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-checkbox-group v-model="form.display.toolbox.feature" :disabled="!form.display.toolbox.show">
            <a-checkbox value="saveAsImage" name="type">
              保存图片
            </a-checkbox>
            <a-checkbox value="dataView" name="type">
              数据视图
            </a-checkbox>
          </a-checkbox-group>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import bus from '@/views/components/bus';
  export default {
    props: ['display', 'form'],
    data() {
      return {}
    },
    methods: {
      onSubmit () {
        const _chartForm = this.form.display
        if (_chartForm.visualMap.min == null || _chartForm.visualMap.min<0) return false
        if (_chartForm.visualMap.max == null || _chartForm.visualMap.max<0) return false
        if (_chartForm.toolbox.show) {
          if (!_chartForm.toolbox.feature.length) return  false
        }
        return  true
      },
    },
    mounted() {
      bus.$on('verifyForm',(back)=>{
        back(this.onSubmit())
      }) 
    },
    beforeDestroy() {
      bus.$off('verifyForm')
    },
  }
</script>

<style scoped>
.gao_liang_title {
  font-size: 16px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  text-indent: 10px;
}

.gao_liang div {
  line-height: 40px;
}
</style>